<template>
  <div class="app-container calendar-list-container">
    <!--查询条件-->
    <div class="filter-container">
      <el-row>
        <el-col :span="6">
          <el-button type="primary" size="small" @click="checkInbound">入库确认</el-button>
          <el-button type="primary" size="small" @click="checkPrintInbound">扫码入库</el-button>
        </el-col>
        <el-col :span="18" style="text-align: right">
          <el-input size="small" style="width: 200px" class="filter-item more-search" placeholder="订单号-回车查询"
                    v-model="search.condition.key" @keyup.enter.native.prevent="list"></el-input>
          <!--搜索-->
          <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-circle-plus-outline"
                     @click="moreClick">更多
          </el-button>
          <el-dropdown trigger="click" :hide-on-click=false style="float: right;margin-left: 10px">
            <span class="el-dropdown-link">
              <el-button class="filter-item" size="small" type="primary" v-waves>
                选择列
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-checkbox-group v-model="columnCheckList">
                  <el-checkbox label="id">通知单号</el-checkbox>
                  <el-checkbox label="storeHouseName">仓库</el-checkbox>
                  <el-checkbox label="ownerId">客户</el-checkbox>
                  <el-checkbox label="ownerOrderNo">客户订单号</el-checkbox>
                  <el-checkbox label="status">入库状态</el-checkbox>
                  <el-checkbox label="inspectStatus">质检状态</el-checkbox>
                  <el-checkbox label="materielId">车型名称</el-checkbox>
                  <el-checkbox label="lotNo1">车架号</el-checkbox>
                  <el-checkbox label="materielName">车型描述</el-checkbox>
                </el-checkbox-group>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
      <div style="clean:both"></div>
      <!--更多内容-->
      <div v-show="moreSearchVisible" style="height: auto;margin-top: 10px;">
        <el-form ref="form" :model="search.condition" label-width="100px" :inline="true">
          <el-form-item label="单据状态">
            <el-select v-model="search.condition.status" placeholder="请选择单据状态">
              <el-option label="未选择" value=""></el-option>
              <el-option label="未入库" value="10"></el-option>
              <el-option label="部分入库" value="20"></el-option>
              <el-option label="全部入库" value="30"></el-option>
              <el-option label="取消入库" value="40"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="车架号">
            <!--<el-input placeholder="请输入车架号" class="w200" clearable v-model="search.condition.lotNo1"></el-input>-->
            <el-input type="textarea" :rows="2" style="width: 250px"
                      v-model="search.condition.lotNo1"  placeholder="请输入车架号, 以逗号来分隔"></el-input>
          </el-form-item>
          <el-form-item label="入库时间:">
            <el-date-picker class="w200" v-model="search.condition.startDate" type="datetime" placeholder="选择日期时间"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            align="right" ></el-date-picker>
            <span class="zhi-font">至</span>
            <el-date-picker class="w200" v-model="search.condition.endDate" type="datetime" placeholder="选择日期时间"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            align="right" ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="list" style="margin-left: 10px">查询</el-button>
            <el-button type="primary" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!--列表-->
    <el-table ref="stockInitTable" :data="stockInitList" @selection-change="handleSelectionChange"
              v-loading="listLoading" element-loading-text="加载中" border fit highlight-current-row
              @row-click="rowClick"
              style="width: 100%;margin-top:5px">
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column :key="key" align="center" :width="value.width" v-for='(value,key) in columnList'
                       :label="value.title">
        <template slot-scope="scope">
          <div v-if="value.key === 'status'">{{scope.row[value.key] | inboundLineStatusFilter}}</div>
          <div v-else-if="value.key === 'inspectStatus'">{{scope.row[value.key] | inboundInspectStatusFilter}}</div>
          <div v-else>{{scope.row[value.key]}}</div>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination :current-page.sync="page.pageNo" :page-sizes="[10,20,30,50]" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :page-size="page.pageSize" :total="page.totalRecord"
                     layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>
    <!--入库确认面板-->
    <el-dialog title="入库确认" width="50%" :visible.sync="dialogVisible" @close="dialogVisibleClose" append-to-body v-dialogDrag >
      <hr>
      <el-row>
        <el-col style="width: 120px;text-align: right;margin-right: 10px;line-height: 32px;height: 32px;">车架号(vin)
        </el-col>
        <el-input placeholder="vin码-回车查询" v-model="columnDetailDialogList.lotNo1in"
                  style="margin-right: 10px;width: 200px" clearable @keyup.enter.native="searchDetail"/>
        <span>
          <el-button type="primary" @click="taskPutWay"
                     :disabled="columnDetailDialogList.status === '30' || dialogInboundClick">入库确认</el-button>
          <el-button type="primary" :disabled="printQRDisabled" @click="printQR">打印二维码</el-button>
          <el-button type="primary" :disabled="keyConfirmDisabled" @click="keyCollectConfirm">收取钥匙确认</el-button>
        </span>
      </el-row>
      <hr>
      <el-form ref="inboundForm" :model="columnDetailDialogList" label-width="120px" :inline="true">
        <el-form-item label="订单号: ">
          <div class="w200 printBig">{{columnDetailDialogList.ownerOrderNo}}</div>
        </el-form-item>
        <el-form-item label="VIN: ">
          <div class="w200 printBig">{{columnDetailDialogList.lotNo1}}</div>
        </el-form-item>
        <el-form-item label="车型:">
          <div class="w200 printBig">{{columnDetailDialogList.materielName}}</div>
        </el-form-item>
        <el-form-item label="货主: ">
          <div class="w200 printBig">{{columnDetailDialogList.ownerId}}</div>
        </el-form-item>
        <el-form-item label="收货仓库: ">
          <div class="w200 printBig">{{columnDetailDialogList.storeHouseName}}</div>
        </el-form-item>
        <el-form-item label="入库时间: ">
          <div class="w200 printBig">{{columnDetailDialogList.gmtCreate}}</div>
        </el-form-item>
        <el-form-item label="目的地: ">
          <div class="w200 printBig">{{columnDetailDialogList.destLocationDetail}}</div>
        </el-form-item>
        <div v-show="columnDetailDialogList.status === '30'">
          <el-form-item label="库区">
            <div class="w200 printBig">{{columnDetailDialogList.storeAreaName}}</div>
          </el-form-item>
          <el-form-item label="库位">
            <div class="w200 printBig">{{columnDetailDialogList.locationCode}}</div>
          </el-form-item>
        </div>
        <div v-show="columnDetailDialogList.status !== '30'">
          <el-form-item label="库区">
            <el-select class="w200" v-model="columnDetailDialogList.storeAreaId" @change="areasChange"
                       placeholder="请选择库区">
              <el-option v-for="forArea in areas" :label="forArea.storeAreaName" :value="forArea.storeAreaId"
                         :key="forArea.storeAreaId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="库位">
            <el-select class="w200" v-model="columnDetailDialogList.locationId" placeholder="请选择库位">
              <el-option v-for="forLoaction in storeLocationList" :label="forLoaction.name" :value="forLoaction.id"
                         :key="forLoaction.id"></el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-form>
    </el-dialog>
    <!--打印二维码-->
    <el-dialog title="打印二维码" width="500px" :visible.sync="printQRFlag"  @close="printQRCancel" v-dialogDrag append-to-body>
      <hr>
      <div id="printQRBox">
        <el-row>
          <el-col :span="8">
            <div class="print-QR-img">
              <img :src="img_src_QR" class="img_src_QR" alt="">
            </div>
          </el-col>
          <el-col :span="16" style="padding-top: 10px;">
            <el-row class="print-QR-row">
              <el-col>
                <span>底盘号：</span>
                <span>{{columnDetailDialogList.lotNo1}}</span>
              </el-col>
            </el-row>
            <el-row class="print-QR-row">
              <el-col>
                <span>库位号：</span>
                <span v-if="columnDetailDialogList.status === '30'">{{columnDetailDialogList.storeAreaName}}</span>
                <span v-else>{{getStoreArea(columnDetailDialogList.storeAreaId)}}</span>
                <span v-if="columnDetailDialogList.status === '30'">{{columnDetailDialogList.locationCode}}</span>
                <span v-else>{{getLocationName(columnDetailDialogList.storeAreaId, columnDetailDialogList.locationId)}}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <span>运单号：</span>
                <span>{{columnDetailDialogList.ownerOrderNo}}</span>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <!--<table border="0" style="font-size: 12px; margin: 0px; padding: 0px; font-weight:bold;border:none;" width="112px">-->
      <!--<tr><td rowspan="4" style="overflow: hidden"><div style="width:43px;height:43px;overflow:hidden">-->
      <!--我是图片</div></td></tr>-->
      <!--<tr><td style="font-size: 10px">xxxxx</td></tr>-->
      <!--<tr><td>{{columnDetailDialogList.lotNo1}}</td></tr>-->
      <!--<tr><td>{{columnDetailDialogList.ownerOrderNo}}</td></tr>-->
      <!--</table>-->
      <!--<table border="0" style="font-size: 12px; margin: 0px; padding: 0px; font-weight:bold; height: 100px;">-->
      <!--<tr><td>我是图片</td></tr>-->
      <!--<tr><td><div style="margin-left: 72px;">{{columnDetailDialogList.ownerOrderNo}}</div></td></tr>-->
      <!--</table>-->
      <el-row>
        <el-col style="margin-left: 340px">
          <el-button type="primary" @click="printQRConfirm">打印</el-button>
          <el-button type="primary" @click="printQRCancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!--选择库区面板-->
    <el-dialog title="选择库区" append-to-body v-dialogDrag :visible.sync="reservoirFlag" width="400px">
      <el-form style="margin-top: 20px;">
        <el-form-item label="库区" style="margin-left: 30px;">
          <el-select style="width: 184px;overflow: hidden;" v-model="reservoirVal" placeholder="请选择库区"
                     :remote-method="getReservoirList"
                     clearable filterable  reserve-keyword remote>
            <el-option v-for="(item,index) in reservoirList" :key="index"  :label="item.areaName" :value="item.areaId"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <el-button type="primary" @click="reservoirHandleClose">取消</el-button>
        <el-button type="primary" @click="reservoirConfirmClick">确定</el-button>
      </el-row>
      <div style="height:20px"></div>
    </el-dialog>
  </div>
</template>
<script>
  import * as inbounAPI from '@/api/inbound/inboundPutaway'
  import waves from '@/directive/waves' // 水波纹指令
  import * as Utils from '@/utils/index'
  import { Loading } from 'element-ui'
  const defaultColumn = [
    { key: 'id', title: '通知单号', width: '200px' },
    { key: 'storeHouseName', title: '仓库', width: '200px' },
    { key: 'ownerId', title: '客户', width: '200px' },
    { key: 'ownerOrderNo', title: '客户订单号', width: '160px' },
    { key: 'status', title: '入库状态', width: '' },
    { key: 'inspectStatus', title: '质检状态', width: '' },
    { key: 'materielId', title: '车型名称', width: '160px' },
    { key: 'lotNo1', title: '车架号', width: '200px' },
    { key: 'materielName', title: '车型描述', width: '' },
    { key: 'remarks', title: '备注', width: '160px' }
  ]
  export default {
    directives: {
      waves
    },
    data() {
      return {
        search: {
          condition: {
            lotNo1: null,
            status: null,
            key: null,
            startDate: Utils.parseTime((new Date()).getTime(), '{y}-{m}-{d} 00:00:00'),
            endDate: Utils.parseTime((new Date()).getTime(), '{y}-{m}-{d} 23:59:59')
          }
        },
        multipleSelection: [],
        columnList: defaultColumn,
        columnCheckList: [
          'id',
          'storeHouseName',
          'ownerId',
          'ownerOrderNo',
          'status',
          'inspectStatus',
          'materielId',
          'lotNo1',
          'materielName'
        ],
        columnDetailDialogList: {
          storeAreaId: '',
          locationId: ''
        },
        page: {
          pageNo: 1,
          pageSize: 10,
          totalRecord: 0
        },
        areas: [{ storeLocationList: [] }],
        storeLocationList: [],
        loactions: [],
        dialogVisible: false,
        dialogInboundClick: false, // 入库确认 按钮 未禁用
        keyConfirmDisabled: true, // 收取钥匙确认
        putwayLineId: '', // 收取钥匙确认id
        moreSearchVisible: true,
        stockInitList: [],
        detailDialogList: [],
        listLoading: false,
        printQRFlag: false,
        printQRDisabled: true, // 打印按钮 禁用
        temp: {
          id: 1
        },
        img_src_QR: '',
        imgBase64: '',
        reservoirVal: null, // 库区面板-库区
        reservoirList: [], // 库区面板-下拉列表
        reservoirFlag: false // 库区面板-显示隐藏
      }
    },
    created() {
      this.list()
      this.queryUsableLocation()
      this.getReservoirList()
    },
    watch: {
      columnCheckList(valArr) {
        this.columnList = defaultColumn.filter(v => {
          for (let i = 0; i < valArr.length; i++) {
            if (v.key === valArr[i]) {
              return v
            }
          }
        })
      }
    },
    methods: {
      // 行选中
      rowClick(row, event, column) {
        // 标记当前选中行
        // this.$refs.stockInitTable.clearSelection()
        // this.$refs.stockInitTable.toggleRowSelection(row)
      },
      // 打印二维码
      printQR() {
        const that = this
        inbounAPI.printBarcode({
          key: that.columnDetailDialogList.lotNo1,
          houseId: that.$store.getters.currentStorehouse.id
        }).then(res => {
          if (res.code === 0) {
            that.img_src_QR = 'data:image/png;base64,' + res.data
            that.imgBase64 = res.data
          }
        })
        that.printQRFlag = true
      },
      // 确认打印
      printQRConfirm() {
        const that = this
        var localNo = ''
        if (that.columnDetailDialogList.status === '30') {
          localNo = that.columnDetailDialogList.storeAreaName + ' ' + that.columnDetailDialogList.locationCode
        } else {
          localNo = that.getStoreArea(that.columnDetailDialogList.storeAreaId) + ' ' +
            that.getLocationName(that.columnDetailDialogList.storeAreaId, that.columnDetailDialogList.locationId)
        }
        if (this.tools.checkPrintInstall()) {
          // this.tools.printHTML(document.getElementById('printQRBox').innerHTML, 790, 1)
          this.tools.printQrImp(that.imgBase64, that.columnDetailDialogList.lotNo1, localNo, that.columnDetailDialogList.ownerOrderNo)
        }
      },
      // 取消打印
      printQRCancel() {
        const that = this
        that.img_src_QR = null
        that.printQRFlag = false
      },
      dialogVisibleClose() {
        this.columnDetailDialogList = {
          storeAreaId: '',
          locationId: ''
        }
      },
      // 获取库位名字
      getStoreArea(id) {
        if (id !== '' && id === null) {
          const t = this.areas.filter(i => i.storeAreaId === id)[0]
          if (t) {
            return t.storeAreaName
          } else {
            return ''
          }
        }
        return ''
      },
      getLocationName(id, id1) {
        if (id && id1) {
          const t = this.areas.filter(i => i.storeAreaId === id)[0]
          const s = t.storeLocationList.filter(i => i.id === id1)
          return s[0].name
        }
        return ''
      },
      // 重置
      reset() {
        this.search.condition = {
          lotNo1: null,
          status: null,
          key: null
        }
        this.list()
      },
      list() {
        const that = this
        // 更多
        const queryParam = {}
        if (this.moreSearchVisible) {
          queryParam.condition = that.search.condition
        } else {
          queryParam.condition = {
            startDate: Utils.parseTime((new Date()).getTime(), '{y}-{m}-{d} 00:00:00'),
            endDate: Utils.parseTime((new Date()).getTime(), '{y}-{m}-{d} 23:59:59'),
            key: that.search.condition.key
          }
        }
        // 分页
        queryParam.current = this.page.pageNo
        queryParam.size = this.page.pageSize
        queryParam.condition.houseId = this.$store.getters.currentStorehouse.id
        this.listLoading = true
        inbounAPI.inboundTaskQueryPage(queryParam).then(result => {
          if (result.code === 0) {
            this.stockInitList = result.data.records
            this.page.pageNo = result.data.current
            this.page.pageSize = result.data.size
            this.page.totalRecord = result.data.total
            that.listLoading = false
          }
        })
      },
      // 入库确认按钮
      checkInbound() {
        if (this.checkSelect(this.multipleSelection)) {
          this.getReservoirList()
          this.reservoirFlag = true
        }
      },
      // 入库确认
      inboundPutAwayConfirm(areaId) {
        const queryParam = {}
        const ids = []
        const that = this
        this.multipleSelection.forEach(row => {
          ids.push(row.id)
        })
        queryParam.lineIds = ids
        queryParam.houseId = this.$store.getters.currentStorehouse.id
        queryParam.areaId = areaId
        this.listLoading = true
        inbounAPI.inboundTaskPutAwayList(queryParam).then(result => {
          that.listLoading = false
          if (result.code === 0) {
            this.$message({
              message: result.message,
              type: 'info',
              duration: 2000
            })
            this.list()
          }
          this.reservoirFlag = false
        }).catch(() => {
          that.listLoading = false
        })
      },
      // 获取库区面板-库区下拉列表
      getReservoirList() {
        console.log('获取库区面板时更新的currentStorehouse', this.$store.getters.currentStorehouse)
        this.reservoirList = []
        inbounAPI.queryValidArea({ storeHouseId: this.$store.getters.currentStorehouse.id }).then(result => {
          if (result.data && result.data.length > 0) {
            this.reservoirList = result.data
          } else {
            this.reservoirList = []
            this.$message({
              type: 'info',
              message: '暂无库区',
              duration: 2000
            })
          }
        }).catch(() => {
        })
      },
      // 库区面板-关闭
      reservoirHandleClose() {
        this.reservoirFlag = false
      },
      // 库区面板-提交
      reservoirConfirmClick() {
        // console.log('reservoirConfirmClick()-reservoirVal', this.reservoirVal)
        if (this.reservoirVal) {
          this.inboundPutAwayConfirm(this.reservoirVal)
        } else {
          this.$confirm('您未指定库区，系统将会按照规则自动匹配库区!', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const now_reservoirVal = null
            this.inboundPutAwayConfirm(now_reservoirVal)
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作',
              duration: 2000
            })
          })
        }
      },
      // 打开 扫码入库 弹窗
      checkPrintInbound() {
        this.dialogVisible = true // 打开 扫码入库弹窗
        this.printQRDisabled = true // 重置  打印按钮 禁用
        this.dialogInboundClick = false // 重置  入库确认 按钮 未禁用
      },
      // 回车查询
      searchDetail() {
        this.dialogInboundClick = false
        const queryParam = {}
        queryParam.key = this.columnDetailDialogList.lotNo1in
        queryParam.houseId = this.$store.getters.currentStorehouse.id
        // 全屏loading 开启
        const loadingInstance = Loading.service({ fullscreen: true, lock: true, text: 'Loading',
          spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' })
        inbounAPI.inboundTaskSeachDetail(queryParam).then(result => {
          if (result.code === 0) {
            this.columnDetailDialogList = result.data
            this.columnDetailDialogList.lotNo1in = queryParam.key
            if (this.columnDetailDialogList.status === '10') {
              this.dialogInboundClick = false
              this.queryUsableLocation()
            }
            if (this.columnDetailDialogList.status === '30') { // status === '30' 已确认入库 则放开 打印二维码按钮
              this.printQRDisabled = false
            } else {
              this.printQRDisabled = true
            }
          } else {
            this.printQRDisabled = true
            this.$notify({
              title: '信息提示',
              message: result.message,
              type: 'error',
              duration: 2000
            })
          }
          loadingInstance.close()  // 全屏loading 关闭
        }).catch(() => {
          this.columnDetailDialogList = {
            storeAreaId: '',
            locationId: ''
          }
          loadingInstance.close()  // 全屏loading 关闭
        })
      },
      queryUsableLocation() {
        const queryParam = {}
        queryParam.houseId = this.$store.getters.currentStorehouse.id
        inbounAPI.queryUsableLocation(queryParam).then(result => {
          if (result.code === 0) {
            this.storeLocationList = result.data[0].storeLocationList
            this.columnDetailDialogList.storeAreaId = result.data[0].storeAreaId
            this.columnDetailDialogList.locationId = result.data[0].storeLocationList[0].id
            this.areas = result.data
          } else {
            this.$notify({
              title: '信息提示',
              message: result.message,
              type: 'error',
              duration: 2000
            })
          }
        })
      },
      // 确认入库
      taskPutWay(val) {
        this.dialogInboundClick = true
        const queryParam = this.columnDetailDialogList
        queryParam.houseId = this.$store.getters.currentStorehouse.id
        queryParam.locationId = this.columnDetailDialogList.locationId
        queryParam.storeAreaId = this.columnDetailDialogList.storeAreaId
        // 全屏loading 开启
        const loadingInstance = Loading.service({ fullscreen: true, lock: true, text: 'Loading',
          spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' })
        inbounAPI.inboundTaskPutWay(queryParam).then(result => {
          this.dialogInboundClick = false
          if (result.code === 0) {
            this.$notify({
              title: '信息提示',
              message: '操作成功',
              type: 'success'
            })
            this.printQRDisabled = false
            this.list()
            this.dialogInboundClick = true
            this.keyConfirmDisabled = false // 放开 收取钥匙确认按钮
            if (result.data.putwayLineId) {
              this.putwayLineId = result.data.putwayLineId
            }
          } else {
            this.printQRDisabled = true
            this.$notify({
              title: '信息提示',
              message: result.message,
              type: 'error',
              duration: 2000
            })
          }
          loadingInstance.close()  // 全屏loading 关闭
        }).catch(() => {
          this.dialogInboundClick = false
          loadingInstance.close()  // 全屏loading 关闭
        })
      },
      // 收取钥匙确认
      keyCollectConfirm() {
        const toParams = {
          putawayLineIds: this.putwayLineId
        }
        if (this.putwayLineId) {
          // 全屏loading 开启
          const loadingInstance = Loading.service({ fullscreen: true, lock: true, text: 'Loading',
            spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' })
          inbounAPI.confirmReceiveKey(toParams).then(result => {
            if (result.code === 0) {
              this.$notify({
                title: '信息提示',
                message: '操作成功',
                type: 'success'
              })
              this.keyConfirmDisabled = true
            } else {
              this.$notify({
                title: '信息提示',
                message: result.message,
                type: 'error',
                duration: 2000
              })
            }
            loadingInstance.close()  // 全屏loading 关闭
          }).catch(() => {
            loadingInstance.close()  // 全屏loading 关闭
          })
        } else {
          this.$notify({
            title: '信息提示',
            message: '没有收取钥匙id',
            type: 'error',
            duration: 2000
          })
        }
      },
      // 展开更多
      moreClick() {
        this.moreSearchVisible = !this.moreSearchVisible
      },
      handleSizeChange(val) {
        // 分页size变化
        this.page.pageSize = val
        this.list()
      },
      // // 选中绑定列
      // toggleSelection(rows) {
      //   if (rows) {
      //     rows.forEach(row => {
      //       this.$refs.multipleTable.toggleRowSelection(row)
      //     })
      //   } else {
      //     this.$refs.multipleTable.clearSelection()
      //   }
      // },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      handleCurrentChange(val) {
        // 分页当前页变化
        this.page.pageNo = val
        this.list()
      },
      // 检查是否选择单条
      checkSelect(data) {
        const l = data.length
        if (l === 0) {
          this.$message({
            message: '未选择',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        return true
      },
      areasChange(val) {
        const areaid = this.columnDetailDialogList.storeAreaId
        for (let i = 0; i < this.areas.length; i++) {
          if (this.areas[i].storeAreaId === areaid) {
            this.loactions = this.areas[i].storeLocationList
            this.storeLocationList = this.areas[i].storeLocationList
            break
          } else {
            this.loactions = []
            this.storeLocationList = []
          }
        }
        // 过滤路径
        const t = this.areas.filter(i => i.storeAreaId === val)
        this.storeLocationList = t[0].storeLocationList
        this.columnDetailDialogList.locationId = t[0].storeLocationList[0].id
      }
    }
  }
</script>
<style type="text/scss" lang="scss" scoped>
  .print-QR-img{
    width: 160px;
    height: 170px;
    position: relative;
    overflow: hidden;
    .img_src_QR{
      position: absolute;
      width: 100%;
      left: -14px;
      top: -14px;
    }
  }
  .print-QR-row{
    margin-bottom: 14px;
  }
  .printBig{
    font-size: 14px;
    font-weight: bold;
  }
</style>
